<template>
  <div class="login">
    <div class="title">短信验证查询</div>
    <div class="c-999 fz-12 mt-10">请使用下单人号码或收货人号码查询</div>
    <van-form @submit="onSubmit" ref="formRef" class="mt-40">
      <van-field
        v-model="state.phone"
        name="phone"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请输入手机号' }]"
      />
      <van-field
        v-model="state.code"
        name="code"
        placeholder="请输入验证码"
        :rules="[{ required: true, message: '请输入验证码' }]"
      >
        <template #button>
          <van-button
            size="small"
            round
            @click="getCode"
            :disabled="state.codeWaitTime !== 0"
          >{{
            state.codeWaitTime
              ? `${state.codeWaitTime} 秒后重试`
              : "获取验证码"
          }}</van-button
          >
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button
          round
          block
          color="linear-gradient(to right, #d61a1b, #e2595a)"
          native-type="submit"
        >
          查询
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, onActivated } from "vue";
import { getCaptcha, verifyCaptcha } from "@/api/common";
import { Toast } from "vant";
import { useRouter, useRoute } from "vue-router";
import { isMobile } from "@/utils";
import { setPhoneTokenMap } from '@/utils/storage'

export default defineComponent({
  setup() {
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      phone: route.query.phone || "",
      code: "",
      codeWaitTime: 0,
    });
    const formRef = ref();
    const onSubmit = () => {
      const params = {
        phone: state.phone,
        captcha: state.code,
        type: "PHONE",
      };
      verifyCaptcha(params).then((res) => {
        if (res.code === 200) {
          const phoneTokenMap = {
            [state.phone]: res.data
          }
          setPhoneTokenMap(phoneTokenMap)
          router.push({
            path: "/order/list",
            query: { phone: state.phone },
          });
        }
      });
    };

    // 获取验证码
    let codeTimer = null;
    const getCode = () => {
      if (!isMobile(state.phone)) {
        Toast.fail("请输入正确的手机号！");
        return;
      }
      if (state.phone) {
        const params = {
          phone: state.phone,
        };
        getCaptcha(params).then(() => {
          Toast.success("获取验证码成功！");
          state.codeWaitTime = 60;
          codeTimer = setInterval(() => {
            state.codeWaitTime--;
            if (state.codeWaitTime === 0) {
              clearInterval(codeTimer);
              codeTimer = null;
            }
          }, 1000);
        });
      } else {
        Toast("请输入手机号");
      }
    };
    onActivated(() => {
      state.phone = route.query.phone || "";
    });
    return {
      state,
      formRef,
      onSubmit,
      getCode,
    };
  },
});
</script>

<style lang="less" scoped>
.login {
  padding: 80px 20px;
  .title {
    font-size: 26px;
  }
}
</style>
